<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>确认上门</title>
		<link href="css/admin.css" rel="stylesheet" type="text/css">
		<link href="css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="css/personal.css" rel="stylesheet" type="text/css">
		<link href="css/bilstyle.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
        <script src="js/common.js"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/amazeui.js"></script>
       
	</head>

<body>
	<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">	
<top></top>
<bar></bar>
<b class="line"></b>
<!-------------------------------------- 头部结束 -------------------------------------->

<!-------------------------------------- 内容开始 -------------------------------------->

		<div class="center">
			<div class="col-main">
				<div class="main-wrap">
<!--------------------------------------标题开始 -------------------------------------->
					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">确认上门</strong> / <small>Confirmation </small></div>
					</div>
					<hr>

					<!--订单-时间-->



					<table width="100%">
               
               
                <!--订单-顶部标签-->
						<thead>
							<tr>
								<th class="memo"></th>
								
								<th class="time">预约</th>
								
								<th class="name">预约地址</th>
								
								<th class="amount">客户电话</th>
								
								<th class="action">操作</th>
								
							</tr>
						</thead>
                       
                        <hr>
                        
                        
						<tbody>
						
						<!--订单-循环订单-->
							<tr v-for="order,index in orders">
							<!--订单图片（固定）-->
								<td class="img">
									<i><img src="images/receive.png"></i>
								</td>
								<!--订单时间-->
								<td class="time">
									<p> {{order.appointmentStartTime}}
									</p>
									<p class="text-muted">
									</p>
								</td>
								<!--订单地址-->
								<td class="title name">
									<p class="content">
										{{order.heatingNumberObject.address}}
									</p>
								</td>
                                <!--客户电话-->
								<td class="amount">
									<span class="amount-pay">{{order.phone}}</span>
								</td>
								<!--订单操作-->
				                <!--确认后订单进入一个弹框点击确认和取消-->
								<td class="operation">

									<button v-if="order.stateId=='2'"  data-method="confirmTrans" class="layui-btn" @click="ret(order.id)" >确定</button>
									<label v-else  data-method="confirmTrans" class="layui-btn" >{{order.state.stateValue}}</label>
								</td>
							</tr>
						</tbody>
					</table>
				
										
					
				</div>
				
<!-------------------------------------- 内容结束 -------------------------------------->
<!-------------------------------------- 尾部开始 -------------------------------------->
<end></end>
</div>
<!-------------------------------------- 尾部结束 -------------------------------------->
			
<!-------------------------------------- 侧边导航栏开始 -------------------------------------->
			<ban></ban>
			</div>
        </div>
        
<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
	</body>
</html>



<script>

var app = new Vue({
    el:"#app",
    data:{
        admin:{},
        message:'',
		orders:{},
		isButtonDisabled:true
    },
	created:function (){
		this.initdate();
	},
	methods:{
		initdate:function (){
			axios.post("http://localhost:8080/worker/affirm?id="+2
			).then(res=>{
				this.orders=res.data.data;


			});

		},
		ret:function (id){

			axios.post("http://localhost:8080/worker/confirm?id="+id
			).then(res=>{
			});
			location.href="refund.html?id="+id;
		}
	}
 
});
</script>
